<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" @keyup.enter="handleQuery">
      <el-form-item label="片区" prop="deptId">
        <treeselect v-model="queryParams.deptId" style="width:200px;line-height:34px" size="medium" :options="zoneList" :show-count="true" placeholder="请选择片区" />
      </el-form-item>
      <el-form-item label="猪场名称" prop="pigfarmName">
        <el-input
          v-model="queryParams.pigfarmName"
          placeholder="请输入猪场名称"
          clearable
          size="medium"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="建设类型" prop="buildType">
        <el-select v-model="queryParams.buildType" clearable placeholder="请选择" size="medium" style="width:120px">
          <el-option label="楼房猪场" value="1"></el-option>
          <el-option label="平房猪场" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="安全状态" prop="safeType">
        <el-select v-model="queryParams.safeType" clearable placeholder="请选择" size="medium" style="width:120px">
          <el-option label="阴性" value="1"></el-option>
          <el-option label="阳性" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产权归属" prop="propertyType">
        <el-select v-model="queryParams.propertyType" clearable placeholder="请选择" size="medium" style="width:120px">
          <el-option label="自建场" value="1"></el-option>
          <el-option label="代建场" value="2"></el-option>
          <el-option label="租赁场" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="猪场类型" prop="pigfarmType">
        <el-select v-model="queryParams.pigfarmType" clearable placeholder="请选择" size="medium" style="width:140px">
          <el-option label="繁殖场" value="1"></el-option>
          <el-option label="育肥场" value="2"></el-option>
          <el-option label="租赁代养场" value="3"></el-option>
          <el-option label="种猪场" value="4"></el-option>
          <el-option label="自养小区" value="5"></el-option>
          <el-option label="租赁繁殖场" value="6"></el-option>
          <el-option label="公猪站" value="7"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          v-hasPermi="['pigFarm:pigFarmInfo:add']"
          @click="handleAddFn"
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="list"  border size="mini" :height="listHeight || fillHeight('listHeight',['queryForm','add','pagination'],['hamburger-container','tags-view-container'], 130)">
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column label="片区" prop="deptName" :show-overflow-tooltip="true" width="100" align="center"/>
      <el-table-column label="猪场编码" prop="pigfarmNumber" :show-overflow-tooltip="true" width="150" align="center" />
      <el-table-column label="猪场名称" prop="pigfarmName" :show-overflow-tooltip="true" width="150" align="center"/>
      <el-table-column label="建设类型" align="center" width="100" >
        <template slot-scope="scope">
          <span v-show="scope.row.buildType == '1'">楼房猪场</span>
          <span v-show="scope.row.buildType == '2'">平房猪场</span>
        </template>
      </el-table-column>
      <el-table-column label="猪场类型" align="center" width="100" >
        <template slot-scope="scope">
          <span v-show="scope.row.pigfarmType == '1'">繁殖场</span>
          <span v-show="scope.row.pigfarmType == '2'">育肥场</span>
          <span v-show="scope.row.pigfarmType == '3'">租赁代养场</span>
          <span v-show="scope.row.pigfarmType == '4'">种猪场</span>
          <span v-show="scope.row.pigfarmType == '5'">自养小区</span>
          <span v-show="scope.row.pigfarmType == '6'">租赁繁殖场</span>
          <span v-show="scope.row.pigfarmType == '7'">公猪站</span>

        </template>
      </el-table-column>

      <el-table-column label="规模" prop="scale" align="center" width="100" />

      <el-table-column label="安全状态" align="center" width="100" >
        <template slot-scope="scope">
          <span v-show="scope.row.safeType == '1'">阴性</span>
          <span v-show="scope.row.safeType == '2'">阳性</span>
        </template>
      </el-table-column>

      <el-table-column label="产权归属" align="center" width="100" >
        <template slot-scope="scope">
          <span v-show="scope.row.propertyType == '1'">自建场</span>
          <span v-show="scope.row.propertyType == '2'">代建场</span>
          <span v-show="scope.row.propertyType == '3'">租赁场</span>
        </template>
      </el-table-column>


      <el-table-column label="所在公司" prop="companyName"  :show-overflow-tooltip="true" align="center" width="180" />
      <el-table-column label="猪场地址" prop="address" align="center" width="180" :show-overflow-tooltip="true" />
      <el-table-column label="创建人" prop="createName" align="center" width="100" />
      <el-table-column label="创建时间" prop="createTime" align="center" width="150" />

      <el-table-column label="操作" align="center"  width="200" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-order"
            @click="handleDetails(scope.row.id)"
          >详情</el-button>
          <el-dropdown style="margin-left: 10px">
            <el-button type="text" size="mini" >
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  v-hasPermi="['pigFarm:pigFarmInfo:change']"
                  @click="handleChange(scope.row.id)"
                >修改</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" size="small" icon="el-icon-refresh" @click="sysnc(scope.row.id)" v-hasPermi="['pigFarm:pigFarmInfo:sysnc']">同步</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  v-hasPermi="['pigFarm:pigFarmInfo:delete']"
                  @click="handleDelete(scope.row)"
                >删除</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import {listPigFarmInfo, getTreeselect, delPigFarmInfo, zcSysnc} from "@/api/pigFarm/pigFarmInfo";
import { roleOption } from "@/api/auth/role";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/auth/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import BaseIndex from '@/views/base/BaseIndex'
import {srmSysnc} from "@/api/projectManagement/initiation";
export default {
  name: "PigFarmInfo",
  components: { Treeselect },
  extends: BaseIndex,
  data() {
    return {
      listHeight:0,
      zoneList:[],
      props:{
        value:'id',
        label:'label'
      }
    };
  },
  watch: {

  },
  created() {
    console.log(this.ids)
    this.getList();
    getTreeselect().then(
      response => {
        if(response && response.code ===0){
          this.zoneList = response.data
        }else{
          this.msgError(response.msg)
        }
        this.loading = false;
      }
    );

  },
  methods: {
    listPigFarmInfo,
    delPigFarmInfo,
    handleChange(id){  // 修改
      this.$router.push({path: "pigFarmDetails", query: {
        type:'change',
        id
      }});
    },
    // 同步 数据
    sysnc(id){
      this.$confirm('确定是否同步?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.loading = true
        zcSysnc(id).then(
          res => {
            if (res.code==0){
              this.getList()
              this.$message.success('同步成功')
            }else{
              this.$message.warning('同步失败')
            }
            this.loading = false;
          }
        ).catch((err) => {
          this.loading = false;
          this.$message.warning('同步失败')
        })
      }).catch(() => {
      });
    },
    handleSubCat(e){
      console.log(e[1])
      this.queryParams.deptId = e[1]
    },
    handleAddFn(){
      this.$router.push({path: "pigFarmDetails", query: {
        type:'add'
      }});
    },
    handleDetails(id){
      this.$router.push({path: "pigFarmDetails", query: {
        type:'details',
        id
      }});
    }
  }
};
</script>
